<template>
  <div class="classify">
    <tableComponents :pagination="{
        currentPage,
        pageSize: pagesize,
        total: shop_list.all_num
      }" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :isHaveExport="false" @toAdd="dialogFormVisible = true"
        @sendUserSearch="getSearch" :searchData="cateSearchData">
      <template v-slot:table>
        <el-table ref="multipleTable" stripe v-loading="loading" header-row-class-name="head_color" :data="shop_list.data" tooltip-effect="dark"
            style="width: 99.8%" :default-sort="{ prop: 'sort' }" @selection-change="handleSelectionChange">
          <el-table-column prop="sort" sortable :sort-method="sorta" label="排序" min-width="30">
            <template slot-scope="scope">
              <el-input @change="sortNew(scope.$index, scope.row)" v-model.number="scope.row.sort" autocomplete="off" size="mini"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="分类名称" min-width="70">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{ scope.row.title }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="副标题" min-width="70">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{ scope.row.sub_title }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="金额" min-width="70">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{ $fnc.toFixedZ(scope.row.price) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="分类信息" min-width="120">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>成团人数：</span>
                  <span>{{ scope.row.number }}</span>
                </div>
                <div>
                  <span>中奖人数：</span>
                  <span>{{ scope.row.people }}</span>
                </div>
                <div>
                  <span>未拼中分润：</span>
                  <span>{{ $fnc.toFixedZ(scope.row.profit) }} ‰</span>
                </div>
                <div>
                  <span>拼购者直推分润：</span>
                  <span>{{ $fnc.toFixedZ(scope.row.profit_01) }} ‰</span>
                </div>
                <div>
                  <span>拼购者间推(二级)分润：</span>
                  <span>{{ $fnc.toFixedZ(scope.row.profit_02) }} ‰</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="是否显示" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.is_show" active-color="#13ce66" inactive-color="#ffffff" active-text="显示"
                  inactive-text="不显示" active-value="1" @change="getIscheck(scope.row)" inactive-value="0"></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="50">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="updateNews(scope.row)">编辑</el-button>

                <el-button :loading="$store.state.isLoading" size="mini" type="danger" @click="deleteShopItem(scope.row.id)">删除</el-button>

                <el-button :loading="$store.state.isLoading" size="mini" type="success" @click="goPhase(scope.row.id)">拼购期数</el-button>

                <el-button :loading="$store.state.isLoading" size="mini" type="danger" @click="failBtn(scope.row.id)">取消活动</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog :close-on-click-modal="false" title="拼购分类" width="800px" class="tl size_13" @close="closeDio" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" :rules="rules" :label-width="formLabelWidth">
        <el-form-item label="分类名称" prop="title">
          <el-col :span="12">
            <el-input v-model="form.title" autocomplete="off" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="副标题" prop="sub_title">
          <el-col :span="12">
            <el-input v-model="form.sub_title" autocomplete="off" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="金额" prop="price">
          <el-col :span="12">
            <el-input v-model="form.price" autocomplete="off" size="small">
              <span slot="append">元</span>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="成团人数" prop="number">
          <el-col :span="12">
            <el-input v-model="form.number" autocomplete="off" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="中奖人数" prop="people">
          <el-col :span="12">
            <el-input v-model="form.people" autocomplete="off" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="未拼中分润" prop="profit">
          <el-col :span="12">
            <el-input v-model="form.profit" autocomplete="off" size="small">
              <span slot="append">‰</span>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="拼购者直推分润" prop="profit_01">
          <el-col :span="12">
            <el-input v-model="form.profit_01" autocomplete="off" size="small">
              <span slot="append">‰</span>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="拼购者间推(二级)分润" prop="profit_02">
          <el-col :span="12">
            <el-input v-model="form.profit_02" autocomplete="off" size="small">
              <span slot="append">‰</span>
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="addMenu('form')" size="mini">立即提交</el-button>
          <el-button :loading="$store.state.isLoading" @click="resetForm('form')" size="mini">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { groupbuyCateSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据

export default {
  name: "groupbuy_cate",
  data () {
    return {
      searchAll: {},
      cateSearchData: groupbuyCateSearchData,
      activity_option: {}, //活动场景
      activity_edit: false,
      activity_form: {},
      activity: "", //活动场景
      types: "",
      shop_list: {
        data: []
      },
      multipleSelection: [],
      loading: false,
      pagesize: 10,
      currentPage: 1,
      ewmdio: false,
      dialogFormVisible: false,
      form: {
        title: "",
        sub_title: "",
        price: "",
        number: "",
        people: "",
        profit: "",
        profit_01: "",
        profit_02: "",
        is_show: "1",
        sort: "10"
      },
      rules: {
        title: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入金额", trigger: "blur" }],
        number: [
          { required: true, message: "请输入成团人数", trigger: "blur" }
        ],
        people: [{ required: true, message: "请输入中奖人数", trigger: "blur" }]
      },
      formLabelWidth: "150px"
    };
  },

  components: {},
  created () {
    this.getGroupBuyCateList();
  },
  methods: {
    failBtn (id) {
      this.$swal({
        title: "您确定要取消该分类下的活动吗",
        text: "取消后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要取消",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getGroupbuy.group_buy_cate_fail(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("取消成功！", "您已经取消了这个活动。", "success");
              this.getGroupBuyCateList(1);
            } else {
              this.$fnc.alertError("取消失败！", res.data.result);
            }
          });
        }
      });
    },
    goPhase (gid) {
      this.$store.commit("addbreadcrumbs", {
        title: "拼购期数",
        url: `/index/groupbuy/phase?gid=${gid}`
      });
      this.$router.push({
        path: "/index/groupbuy/phase",
        query: { gid }
      });
    },
    getSearch (obj) {
      this.currentPage = 1;
      this.pagesize = 10;
      this.searchAll = obj || {};

      this.getGroupBuyCateList();
    },
    resetForm (formName) {
      this.form = {
        title: "",
        sub_title: "",
        price: "",
        number: "",
        people: "",
        profit: "",
        profit_01: "",
        profit_02: ""
      };
    },
    addMenu (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          var params = {};
          params = this.form;
          if (params.id) {
            this.$api.getGroupbuy.updateGroupbuyCate(params).then(res => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
                this.getGroupBuyCateList();
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          } else {
            this.$api.getGroupbuy.addGroupbuyCate(params).then(res => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                this.getGroupBuyCateList();
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    closeDio () {
      this.dialogFormVisible = false;
      this.form = {
        id: "",
        title: "",
        sub_title: "",
        price: "",
        number: "",
        people: "",
        profit: "",
        profit_01: "",
        profit_02: ""
      };
    },
    getIscheck (info) {
      var params = {};
      params.is_show = info.is_show;
      params.id = info.id;
      params.title = info.title;
      params.sub_title = info.sub_title;
      params.price = info.price;
      params.number = info.number;
      params.people = info.people;
      params.profit = info.profit;
      params.profit_01 = info.profit_01;
      params.profit_02 = info.profit_02;
      params.is_show = info.is_show;
      params.sort = info.sort;
      this.$api.getGroupbuy.updateGroupbuyCate(params).then(res => {
        if (res.data.code == 200 && res.data.result) {
          this.$fnc.alertSuccess("修改成功");
          this.getGroupbuyCate(1);
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    updateNews (row) {
      this.dialogFormVisible = true;
      this.form = row;
      this.form.price = this.$fnc.toFixedZ(this.form.price);
      this.form.profit = this.$fnc.toFixedZ(this.form.profit);
      this.form.profit_01 = this.$fnc.toFixedZ(this.form.profit_01);
      this.form.profit_02 = this.$fnc.toFixedZ(this.form.profit_02);
    },
    deleteShopItem (id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getGroupbuy.deleteGroupbuyCate(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getGroupBuyCateList(1);
            } else {
              this.$fnc.alertError("删除失败！", res.data.result);
            }
          });
        }
      });
    },
    sorta (a, b) {
      return b - a;
    },
    sortNew (index, row) {
      var params = {};
      params.id = row.id;
      params.sort = row.sort;
      params.is_show = row.is_show;
      params.title = row.title;
      params.sub_title = row.sub_title;
      params.price = row.price;
      params.number = row.number;
      params.people = row.people;
      params.profit = row.profit;
      params.profit_01 = row.profit_01;
      params.profit_02 = row.profit_02;
      this.$api.getGroupbuy.updateGroupbuyCate(params).then(res => {
        if (res.data.code == 200 && res.data.result) {
          this.getGroupBuyCateList(1);
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      //每页下拉显示数据
      this.pagesize = size;
      this.getGroupBuyCateList(1);
    },
    handleCurrentChange: function (currentPage) {
      //点击第几页
      this.currentPage = parseInt(currentPage);
      this.getGroupBuyCateList(this.currentPage);
    },
    getGroupBuyCateList (page) {
      var params = {};
      params = this.searchAll || {};
      params.page = page;
      params.page_size = this.pagesize;
      this.$api.getGroupbuy.getGroupbuyCate(params).then(res => {
        if (res.data.code == 200) {
          this.shop_list = res.data.result;
        } else {
          this.$fnc.alerterror(res.data.result);
        }
        this.loading = false;
      });
    }
  },
  watch: {}
};
</script>
<style scoped>
.presale {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}
.presale span {
  width: 50%;
  font-weight: normal;
}
.presale div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}
</style>
